import React from 'react'
import Navbar from '../../compoents/Navbar'
import styles from './index.module.css'
import emptyPng from '../../assets/DFAs03.jpg'
import { useNavigate } from 'react-router-dom'
import { CloseCircleOutline, CompassOutline } from 'antd-mobile-icons'
function Index() {
  const notices = React.useMemo(
    () => [
      '公告：自治区卫生热线0951-12320 银川市政府热线0951-12345 妙手互联网医院热线400-078-1000',
      '公告：为更好服务您，即日起点击医生“复诊开方”产生的问诊费用由平台承担',
    ],
    []
  )
  const [active, setActive] = React.useState(0)
  const [sliding, setSliding] = React.useState(false)
  const [resetting, setResetting] = React.useState(false)
  const navigate = useNavigate()

  React.useEffect(() => {
    const timer = setInterval(() => {
      setSliding(true)
      setTimeout(() => {
        setActive(prev => (prev + 1) % notices.length)
        // 立即复位到起点，取消过渡，下一次继续向上
        setSliding(false)
        setResetting(true)
        setTimeout(() => setResetting(false), 30)
      }, 420)
    }, 2800)
    return () => clearInterval(timer)
  }, [notices.length])

  return (
    <div className={styles.fuzhenWrap}>
      <Navbar title="复诊开方" showBack={true}  onBack={()=>navigate(-1)}/>

      <div className={styles.noticeBar}>
        <span className={styles.noticeDot} />
        <div className={styles.noticeViewport}>
          <div className={`${styles.noticeList} ${sliding ? styles.noticeSlide : ''} ${resetting ? styles.noticeReset : ''}`}>
            <div className={styles.noticeRow}>{notices[active]}</div>
            <div className={styles.noticeRow}>{notices[(active + 1) % notices.length]}</div>
          </div>
        </div>
      </div>

      <div className={styles.emptySection}>
        <div className={styles.emptyImageBox}>
          <img src={emptyPng} alt="暂无用药记录" className={styles.emptyImage} />

        </div>
        <div className={styles.emptyTitle}>暂无用药记录</div>
        <div className={styles.desc}>
          复诊开方只面向在平台有医生开具用药记录的患者！您可以先根据当前病情状况找到对应擅长的医生，订购其图文咨询服务，在问诊中医生将根据您的病情描述需要开具用药建议！后续若还有用药需求，就可以直接进入开药门诊申请复诊开方！
        </div>
      </div>

      <div className={styles.actionBlock}>
        <div className={styles.blockTitle}>知道怎么找医生</div>
        <button className={styles.primaryBtn} onClick={()=>navigate('/Teme')}>立即问医生</button>
      </div>

      <div className={styles.actionBlock}>
        <div className={styles.blockTitle}>不知道怎么找医生</div>
        <button className={styles.secondaryBtn} onClick={()=>navigate('/Message')}>联系妙手客服</button>
      </div>
    </div>
  )
}

export default Index
